<script>
export default {
  data() {
    return {
      active: 0
    };
  },

  methods: {
    next() {
      if(this.active ++ > 2) this.active = 0;
    },
  }
}
</script>

<template>
  <el-card class="box-contenier">
      <div class="text-success">
        <el-steps :active="active" finish-status="success">
          <el-step title="待付款" icon="el-icon-goods"></el-step>
          <el-step title="待发货" icon="el-icon-shopping-cart-full"></el-step>
          <el-step title="已发货" icon="el-icon-folder-checked"></el-step>
        </el-steps>
      </div>

    <div>

    </div>

      <div>
        <el-button @click="next">下一步</el-button>
      </div>
  </el-card>

</template>

<style scoped lang="scss">
.box-contenier{
  margin: 10px 10px;
}

.el-button{
  margin-top: 20px;
}
</style>
